/* 加载指示器基础 */
.spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0066CC;
}

/* 圆形加载 */
.spinner-circle {
    width: 40px;
    height: 40px;
}

.spinner-circle .spinner-inner {
    width: 100%;
    height: 100%;
    border: 3px solid #f0f0f0;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 大小 */
.spinner-small {
    width: 24px;
    height: 24px;
}

.spinner-small .spinner-inner {
    border-width: 2px;
}

.spinner-medium {
    width: 40px;
    height: 40px;
}

.spinner-large {
    width: 56px;
    height: 56px;
}

.spinner-large .spinner-inner {
    border-width: 4px;
}

/* 加载条 */
.spinner-bar {
    width: 40px;
    height: 4px;
    background: linear-gradient(90deg, currentColor, transparent);
    border-radius: 2px;
    animation: slide 1.5s ease-in-out infinite;
}

/* 点状加载 */
.spinner-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.spinner-dots .dot {
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    animation: bounce 1.4s infinite;
}

.spinner-dots .dot:nth-child(2) {
    animation-delay: 0.2s;
}

.spinner-dots .dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* 脉冲加载 */
.spinner-pulse {
    width: 40px;
    height: 40px;
    background: currentColor;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* 颜色 */
.spinner-primary {
    color: #0066CC;
}

.spinner-success {
    color: #52c41a;
}

.spinner-warning {
    color: #faad14;
}

.spinner-error {
    color: #ff4d4f;
}

.spinner-info {
    color: #1890ff;
}

/* 动画 */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slide {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@keyframes bounce {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* 响应式 */
@media (max-width: 600px) {
    .spinner-medium {
        width: 32px;
        height: 32px;
    }
}
